<template>
	<view class="repairInfo">
		<u-navbar :title="setTitle" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<!-- 放置原有信息和供用户修改的输入框: -->
		<view class="oldValueInput">
			<text class="fontText">{{ userInfo.title }}</text>
			<u--input :value="userInfo.value" :prefixIcon="userInfo.iconUrl"
				prefixIconStyle="font-size: 22px;color: #909399" disabled></u--input>
			<text class="fontText">请输入正确信息</text>
			<u--input v-if="userInfo.nickName!=='professional'" :value="value" v-model="value" prefixIcon="edit-pen"
				prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			<!-- 若是修改职业信息则出现选项栏: -->
			<view v-if="userInfo.nickName==='professional'">
				<u-picker closeOnClickOverlay="true" @confirm="myConfirm" @cancel="show=false" @close="show=false"
					:show="show" :columns="columns"></u-picker>
				<u-button @click="show = true">打开</u-button>
			</view>
			<u-button type="primary" @click="mySubmit">提交修改</u-button>
		</view>
	</view>
</template>

<script>
	import {
		goDetail
	} from "@/utils/utils.js"
	export default {
		data() {
			return {
				value: "",
				transcript: '',
				timer: null,
				paramter: {

				},
				userInfo: {},
				show: false,
				columns: [
					['1', '2', '3']
				],
			}
		},
		onLoad(option) {
			this.userInfo = JSON.parse(option.Obj)
			// console.log('显示传来的用户信息:', this.userInfo)
			// console.log('显示职业选项:', this.userInfo.selections)
			// this.columns=this.userInfo.selections;
			this.transcript = this.userInfo.value;
			if (this.userInfo.nickName === 'professional') {
				this.columns = [
					[...this.userInfo.selections]
				]
			}
			// console.log('this.coluns',this.columns)
		},
		computed: {
			setTitle() {
				return "修改" + this.userInfo.title
			},
			myParamter() {
				if (this.userInfo.nickName === 'QQ') {
					this.paramter = {
						QQ: this.userInfo.value
					}
				} else if (this.userInfo.nickName === 'email') {
					this.paramter = {
						email: this.userInfo.value
					}
				} else if (this.userInfo.nickName === 'phone') {
					this.paramter = {
						phone: this.userInfo.value
					}
				} else if (this.userInfo.nickName === 'address') {
					this.paramter = {
						address: this.userInfo.value
					}
				} else if (this.userInfo.nickName === 'professional') {
					this.paramter = {
						professional: this.userInfo.value
					}
				}
				return this.paramter
			}
		},
		methods: {
			// 修改用户某项信息:
			repairUserInfo(target) {
				// console.log(target.value)
				// let myParamName = target.nickName
				// console.log(myParamName)
				let that = this;
				let userInfo = new Promise((resolve, reject) => {
					uni.request({
						url: '/user/complete/information',
						data: that.myParamter,
						method: 'POST',
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
				userInfo.then(({
					data: res
				}) => {
					// console.log('value:',target.vlaue)
					// console.log('修改信息之后的结果:', res)
					if (res.result === 'SUCCESS') {
						// 弹窗：
						uni.$u.toast('修改成功!')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)
					} else {
						uni.$u.toast('修改失败!')
					}
				}).catch(err => {
					console.log('返回错误', err);
				})
			},
			mySubmit() {
				if (this.value === "" && this.userInfo.nickName !== 'professional') {
					uni.showModal({
						tittle: "提示",
						content: "输入不可为空!"
					})
				} else {
					let that = this;
					uni.showModal({
						tittle: "提示",
						content: "确定提交吗?",
						success: (res) => {
							if (res.confirm) {
								if (that.userInfo.nickName !== 'professional') {
									that.userInfo.value = that.value;
								}
								that.repairUserInfo(that.userInfo)
							} else {
								that.userInfo.value = that.transcript;
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
			},
			selectClick(index) {
				console.log(index)
			},
			myConfirm(e) {
				// console.log('点击确定:', e.value)
				this.userInfo.value = e.value;
				// console.log(this.userInfo.value)
				// this.paramter = {
				// 	professional: this.userInfo.value
				// }
				this.show = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.repairInfo {
		display: flex;
		// align-items: center;
		flex-direction: column;

		&-title {
			text-align: center;
			font-size: 40rpx;
		}

		.oldValueInput {
			display: flex;
			margin-top: 150rpx;
			flex-direction: column;
			align-content: center;

			.fontText {
				font-size: 35rpx;
				margin: 15rpx;
				color: #525288;
			}

			::v-deep .u-input {
				margin: 10rpx 20rpx 10rpx 20rpx;
			}

			::v-deep .u-button {
				margin: 20rpx;
				width: 95%;
			}
		}
	}
</style>
